<script setup>
import { computed, ref } from 'vue'
import { Popup, Picker } from 'vant'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import { Toast } from 'vant';
import { lunar } from '@/assets/lunar.js';
import Right from '@/assets/img/right.png'
const weeks = ['日', '一', '二', '三', '四', '五', '六']
const calendar = ref(null);
const router = useRouter();
const route = useRoute();
const userId = route.query.userId;
const id = route.query.id ? route.query.id : '';
const showLunar = (date) => {
  if (!date || !date.day) return;

  const lunarObj = lunar.solar2lunar(date.year, date.month + 1, date.day);

  return lunarObj.festival || lunarObj.lunarFestival || lunarObj.IDayCn;
};

const getData = async () => {
  if (!id) return;
  let formData = new FormData();
  formData.append('userId', userId);
  formData.append('id', id);
  let obj = {}
  if (typeof AOS == 'object') {
    let userInfo = JSON.parse(AOS.getUserInfo())
    obj = {
      headers: {
        'Authorization': 'Bearer' + ' ' + userInfo.token
      }
    }
  }
  const res = await axios.post('/TrueIDS/remind/getReMindDetail', formData, obj)
  if (res) {
    let data = res.data.obj
    sx.value = data.content
    rcDate.value = data.startTime
    txDate.value = data.txsj
    // zq
    zq.value = columns2[parseInt(data.recycletype)]
    sx.value = data.content
    bz.value = data.remark
    rcdj.value = data.priority
    bj.value = columns3[parseInt(data.is_complete)]
  }
}
getData()

const addRc = () => {
  let formData = new FormData();
  formData.append('userId', userId);
  formData.append('id', id);
  formData.append('title', sx.value);
  formData.append('rcsj', rcDate.value);
  formData.append('txsj', txDate.value);
  formData.append('trigger1', zq.value.value);
  formData.append('remark', bz.value);
  formData.append('activeText', rcdj.value);
  formData.append('isCompleted', bj.value.value);
  let obj = {}
  if (typeof AOS == 'object') {
    let userInfo = JSON.parse(AOS.getUserInfo())
    obj = {
      headers: {
        'Authorization': 'Bearer' + ' ' + userInfo.token
      }
    }
  }
  axios.post('/TrueIDS/remind/subReMind', formData, obj)
    .then(response => {
      if (response.data.success) {
        Toast(response.data.msg);
        router.go(-1)
      } else {
        Toast(response.data.msg);
      }
    })
    .catch(error => {
      console.error(error);
    });
}

const changeYearOrMonth = (isYear, type) => {
  console.log(isYear, type)
  if (!isYear) {
    if (type === 'up') {
      calendar.value.lastMonth();
    } else {
      calendar.value.nextMonth();
    }
  } else {
    if (type === 'up') {
      curYear.value = Number(curYear.value) - 1
    } else {
      curYear.value = Number(curYear.value) + 1
    }
    calendar.value.reset(new Date(curYear.value, curMonth.value - 1));
  }
}
const curYear = ref('')
const curMonth = ref('')
const formatYearMonth = () => {
  var date = new Date()
  curYear.value = date.getFullYear();
  curMonth.value = ('0' + (date.getMonth() + 1)).slice(-2);
  return `${curYear.value}年${curMonth.value}月`;
}
const curYearMonth = ref(formatYearMonth())
const dataList = ref([1, 2, 3, 4, 5, 6])

const dataChange = (data) => {
  console.log(data)
  curYear.value = data.substring(0, 4)
  curMonth.value = data.substring(5, 7)
  curYearMonth.value = curYear.value + '年' + curMonth.value + '月'
}
const markDate = ['2025/07/09', '2025/07/10', '2025/07/11', '2025/07/12', '2025/07/13', '2025/07/14', '2025/07/15']


const showRcdjPicker = ref(false);
const showRcdj = () => {
  showRcdjPicker.value = true;
}
const columns = ['重要', '次重要', '不重要', '无关紧要']
const rcdj = ref('重要')
const onConfirm = (values) => {
  // console.log(values)
  showRcdjPicker.value = false;
  rcdj.value = values
}
const formatDate = (date1) => {
  let date = new Date();
  if (date1) {
    date = date1
  }
  const year = date.getFullYear();
  const month = ('0' + (date.getMonth() + 1)).slice(-2);
  const day = ('0' + date.getDate()).slice(-2);
  const hour = ('0' + date.getHours()).slice(-2);
  const minutes = ('0' + date.getMinutes()).slice(-2);
  return `${year}-${month}-${day} ${hour}:${minutes}`;
}
const fFormatDate = (date1) => {
  return new Date(date1.substring(0, 4), date1.substring(5, 7) - 1, date1.substring(8, 10), date1.substring(11, 13), date1.substring(14, 16));
}
const rcDate = ref(formatDate());
const txDate = ref(formatDate());
const currentDate = ref(new Date(2025, 6, 1, 12, 15));
const rqKind = ref('1')
const showDatePicker = ref(false);
const showDate = (kind) => {
  rqKind.value = kind
  if (kind == '1') {
    currentDate.value = fFormatDate(rcDate.value)
  } else {
    currentDate.value = fFormatDate(txDate.value)
  }
  showDatePicker.value = true;
}
const onDateConfirm = (values) => {
  console.log(values)
  showDatePicker.value = false;
  if (rqKind.value == '1') {
    rcDate.value = formatDate(values)
  } else {
    txDate.value = formatDate(values)
  }
}
const columns2 = [{ text: '无周期', value: 0 }, { text: '每周', value: 1 }, { text: '每旬', value: 2 }, { text: '每月', value: 3 },
{ text: '每季度', value: 4 }, { text: '每半年', value: 5 }, { text: '每年', value: 6 }
]
const showZqPicker = ref(false);
const zq = ref({ text: '无周期', value: 0 })
const onZqConfirm = (values) => {
  console.log(values)
  showZqPicker.value = false;
  zq.value = values
}

const columns3 = [{ text: '未办', value: 0 }, { text: '已办', value: 1 }]
const showBjlxPicker = ref(false);
const bj = ref({ text: '未办', value: 0 })
const onBjConfirm = (values) => {
  showBjlxPicker.value = false;
  bj.value = values
}
const sx = ref('')
const bz = ref('')
</script>

<template>
  <Header class="header" :isBack="true" name="日程安排" :myTitle="id ? '编辑日程' : '新增日程'" :isSearch="false" :isDelete="false"
    :isEdit="false" :isRili="false" :isComplete="true" @save="addRc" :userId="userId"></Header>
  <div class="richengDiv">
    <div class="item">
      <div class="itemLeft">日程事项</div>
      <!-- <div class="itemRight">上班</div> -->
      <textarea class="itemRight" v-model="sx" placeholder="请输入内容" rows="3" />
    </div>
    <div class="item" @click="showRcdj">
      <div class="itemLeft">日程等级</div>
      <div class="itemRight">{{ rcdj }}<img :src="Right">
      </div>
    </div>
    <div class="item" @click="showDate(1)">
      <div class="itemLeft">日程时间</div>
      <div class="itemRight">{{ rcDate }}<img :src="Right"></div>
    </div>
    <div class="item" @click="showDate(2)">
      <div class="itemLeft">提醒时间</div>
      <div class="itemRight">{{ txDate }}<img :src="Right"></div>
    </div>
    <div class="item" @click="showZqPicker = true">
      <div class="itemLeft">设置周期</div>
      <div class="itemRight">{{ zq.text }}<img :src="Right"></div>
    </div>
    <div class="item" @click="showBjlxPicker = true">
      <div class="itemLeft">办结标识</div>
      <div class="itemRight">{{ bj.text }}<img :src="Right"></div>
    </div>
    <div class="item">
      <div class="itemLeft">备注</div>
      <!-- <div class="itemRight">无</div> -->
      <textarea class="itemRight" v-model="bz" placeholder="请输入内容" rows="3" />
    </div>
  </div>

  <van-popup v-model:show="showRcdjPicker" round position="bottom">
    <van-picker :columns="columns" @cancel="showRcdjPicker = false" @confirm="onConfirm" />
  </van-popup>
  <van-popup v-model:show="showDatePicker" round position="bottom">
    <van-datetime-picker v-model="currentDate" type="datetime" title="选择时间" @cancel="showDatePicker = false"
      @confirm="onDateConfirm" />
  </van-popup>
  <van-popup v-model:show="showZqPicker" round position="bottom">
    <van-picker :columns="columns2" @cancel="showZqPicker = false" @confirm="onZqConfirm" />
  </van-popup>
  <van-popup v-model:show="showBjlxPicker" round position="bottom">
    <van-picker :columns="columns3" @cancel="showBjlxPicker = false" @confirm="onBjConfirm" />
  </van-popup>
</template>
<style scoped>
.header {
  height: 60px;
  flex-shrink: 0;
}

.richengDiv {
  display: flex;
  flex-direction: column;
  background: white;

  .item {
    display: flex;
    width: 100%;
    padding: 20px 12px;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 0.5px solid #E3E3E3;

    .itemLeft {
      width: 100px;
      color: #000000;
      font-size: 16px;
      flex-shrink: 0;
    }

    .itemRight {
      flex-grow: 1;
      color: #589FF6;
      font-size: 16px;
      gap: 6px;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      img {
        width: 9.5px;
        height: 17.5px;
      }
    }

    textarea {
      border: none;
      outline: none;
      font-size: 16px;
      color: #000000;
      text-align: end;
    }
  }
}
</style>
